<%@page import="com.spreedairy.util.CommonUtil"%>
<%@ include file="/html/common/init.jsp"%>

<portlet:renderURL var="detailURL">
	<portlet:param name="jspPage" value="/html/item/view_item.jsp" />
</portlet:renderURL>

<% 
	List<ShoppingItem> itemList = (List)request.getAttribute("ITEM_LIST");
	long imageId = 0l;
	ShoppingItem item = null;
	int i=0;
	SearchContainer searchContainer = null;
	if(Validator.isNotNull(renderRequest.getAttribute("searchContainer"))){
		searchContainer = (SearchContainer)renderRequest.getAttribute("searchContainer");
	}
%>

<div id="item-display" style="width:750px;">
	<% if(Validator.isNotNull(itemList) && itemList.size() > 0) { %>
		<div style="padding-bottom: 10px;width:796px;" >
			<liferay-ui:search-paginator type="spreedairy" searchContainer='<%= searchContainer %>'/>
		</div>
		<table>
			<tr>
				<td style="padding-right:10px;padding-bottom:5px;" valign="top">
					<div class="column1 item">
						<%@ include file="/html/product/item_display.jsp" %>
					</div>
				</td>
				<td style="padding-right:10px;padding-bottom:5px;" valign="top">
					<% if(itemList.size() > 1) { %>
						<div class="column2 item">
							<% i=1; %>
							<%@ include file="/html/product/item_display.jsp" %>
						</div>
					<% } %>
				</td>
				<td style="padding-right:10px;padding-bottom:5px;" valign="top">
					<% if(itemList.size() > 2) { %>
						<div class="column3 item">
							<% i=2; %>
							<%@ include file="/html/product/item_display.jsp" %>
						</div>
					<% } %>
				</td>
			</tr>
			<% if(itemList.size() > 3) { %>
				<tr>
					<td style="padding-right:10px;padding-bottom:5px;" valign="top">
						<div class="column4 item">
							<% i=3; %>
							<%@ include file="/html/product/item_display.jsp" %>
						</div>
					</td>
					<td style="padding-right:10px;padding-bottom:5px;" valign="top">
						<% if(itemList.size() > 4) { %>
							<div class="column5 item">
								<% i=4; %>
								<%@ include file="/html/product/item_display.jsp" %>
							</div>
						<% } %>
					</td>
					<td style="padding-right:10px;padding-bottom:5px;" valign="top">
						<% if(itemList.size() > 5) { %>
							<div class="column6 item">
								<% i=5; %>
								<%@ include file="/html/product/item_display.jsp" %>
							</div>
						<% } %>
					</td>
				</tr>
			<% } %>
		</table>
		<div style="padding-bottom: 10px;width:796px;">
			<liferay-ui:search-paginator type="spreedairy" searchContainer='<%= searchContainer %>'/>
		</div>
	<% }%>
</div>
<style type="text/css">
	#item-display{
		padding:2px;
	}
	
	#item-display .item{
		padding:2px;
	}
	#item-display .column1{
		border:2px solid green;
	}
	#item-display .column2{
		border:2px solid red;
	}
	#item-display .column3{
		border:2px solid green;
	}
	#item-display .column4{
		border:2px solid red;
	}
	#item-display .column5{
		border:2px solid green;
	}
	#item-display .column6{
		border:2px solid red;
	}
	
	#item-display .search-pages .page-links a.previous, #item-display .search-pages .page-links a.next {
	    background-image: url("/product-portlet/image/prev-next-bg.png");
	    background-repeat: repeat-x;
	}
		
	#item-display .search-pages .page-links {
	    float: right;
	    padding: 4px 0 10px;
	}
	
	#item-display .search-pages .page-links a {
	    border: 1px solid #B1B1B1;
	    color: #5D5D5D;
	    font-size: 14px;
	    font-weight: bold;
	    margin: 2px;
	    padding: 5px 10px;
	    text-decoration: none;
	}
	
	#item-display .search-pages .page-links a.selected {
	    background-color: #E5E5E5;
	    text-decoration: none;
	}
	
	#item-display .search-pages .page-links a.previous {
	    padding-left: 5px;
	    padding-right: 5px;
	}
	
	#item-display .search-pages .page-links a.next {
	    background-position: 100% 2px;
	    padding-left: 20px;
	    padding-right: 20px;
	}
	
	#item-display .search-results {
	    float: left;
	    padding-left: 0;
	    padding-top: 6px;
	    width: 240px;
	}
	
	#item-display .bottom_display {
		display: block;
	    float: left;
	    overflow: hidden;
	    width: 250px;
	    word-wrap: break-word;
	}
	
	#item-display .right_display {
		display: block;
	    float: left;
	    overflow: hidden;
	    width: 110px;
	    word-wrap: break-word;
	}
	
	#item-display .left_display {
		display: block;
	    float: left;
	    overflow: hidden;
	    width: 140px;
	    word-wrap: break-word;
	}
	
	#item-display .item{
		display: block;
	    float: left;
	    overflow: hidden;
	    width: 250px;
	    word-wrap: break-word;
	}
}
</style>
